<template>
  <div class="Inspection_application">
    <div class="heard_title">检验预约</div>
    <div style="padding: 0 10px">
      <el-cascader
        :options="options_a"
        collapse-tags
        v-model="OrgansArr"
        style="margin-left: 10px"
        :props="{ checkStrictly: true }"
        @change="handleChange"
        clearable
        size="small"
      ></el-cascader>
      <span style="margin-left: 5px">影像科室：</span>
      <el-select v-model="value_ks" placeholder="请选择" size="small">
        <el-option
          v-for="item in options_ks"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button size="small" style="margin-left: 10px" @click="open"
        >预约登记</el-button
      >
      <el-button
        size="small"
        style="margin-left: 10px"
        @click="dialogVisible_zy = true"
        >检验类型管理</el-button
      >
      <el-button size="small" style="margin-left: 10px">同步至第三方</el-button>
    </div>
    <div style="margin-top: 15px">
      <el-table :data="tableData" style="width: 100%" height="600">
        <el-table-column prop="RvNo" label="预约单号"> </el-table-column>
        <el-table-column prop="PatientName" label="患者姓名"> </el-table-column>
        <el-table-column prop="Sex" label="性别"> </el-table-column>
        <el-table-column prop="Age" label="年龄"> </el-table-column>
        <el-table-column prop="BirthDate" label="出生日期">
          <template slot-scope="scope">
            {{ scope.row.BirthDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="Dept" label="申请科室"> </el-table-column>
        <el-table-column prop="Doctor" label="申请医师"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="yuyue_edit(scope.row)"
              >修改</el-button
            >
            <el-button size="small" @click="yuyue_DEl(scope.row)"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center; margin-top: 15px">
        <el-pagination
          layout="prev, pager, next"
          :total="pages.total"
          :page-size.sync="pages.pagesize"
          :current-page.sync="pages.currentpage"
          @current-change="YYpage_size"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 预约弹层 -->
    <el-dialog
      title="预约登记"
      :visible.sync="dialogVisible_yuyue"
      width="65%"
      :before-close="handleClose_yuyue"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" title="" :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 患者姓名 </template>
          <el-input v-model="from.PatientName" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 性别 </template>
          <el-radio-group v-model="from.Sex" size="small">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 出生日期 </template>
          <el-date-picker
            v-model="from.BirthDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="getAge"
            style="width: 100%"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 年龄 </template>
          <el-input-number
            v-model="from.Age"
            :min="1"
            :max="120"
            label="请输入年龄"
            size="small"
          ></el-input-number>
          &nbsp;岁
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系电话 </template>
          <el-input v-model="from.Telephone" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 门诊号/住院号 </template>
          <el-input v-model="from.HISNo" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item v-if="false">
          <template slot="label"> </template>
          <el-input v-model="from.HISNo" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 床号 </template>
          <el-input v-model="from.BedNO" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请科室 </template>
          <el-input v-model="from.Dept" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请医师 </template>
          <el-input v-model="from.Doctor" size="small"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预约号 </template>
          <el-input v-model="from.RvNo" size="small" disabled></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预约时间 </template>
          <el-date-picker
            v-model="from.Appointment"
            type="datetime"
            placeholder="选择日期时间"
            size="small"
            style="width: 100%"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检验科室 </template>
          <el-select v-model="from.f" placeholder="请选择" size="small">
            <el-option
              v-for="item in options_ks"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检验分类 </template>
          <el-select
            v-model="from.s"
            placeholder="请选择"
            size="small"
            @change="item_change"
          >
            <el-option
              v-for="item in tableData_zy"
              :key="item.TypeNo"
              :label="item.TypeName"
              :value="item.TypeNo"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 检验 </template>
          <el-select
            v-model="from.j"
            placeholder="请选择"
            size="small"
            style="display: inline-block"
            @change="item_change_2"
          >
            <el-option
              v-for="item in options_bw"
              :key="item.ID"
              :label="item.ItemName"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-button
            size="small"
            icon="el-icon-plus"
            @click="BW_ADD"
          ></el-button>
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="tableData_item" style="width: 100%">
        <el-table-column prop="ID" label="项目ID"> </el-table-column>
        <el-table-column prop="ItemNo" label="项目代码"> </el-table-column>
        <el-table-column prop="ItemName" label="项目名称"> </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose_yuyue">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_yuyue_butOk"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 预约资源管理弹层 -->
    <el-dialog
      title="类型管理"
      :visible.sync="dialogVisible_zy"
      width="65%"
      :before-close="handleClose_zy"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div>
        检验类型:
        <el-select
          v-model="JY_item"
          filterable
          placeholder="请选择"
          size="mini"
          @change="JY_item_change"
        >
          <el-option
            v-for="item in tableData_zy"
            :key="item.TypeNo"
            :label="item.TypeName"
            :value="item.TypeNo"
          >
          </el-option>
        </el-select>
        <el-button
          size="small"
          style="margin-left: 10px"
          icon="el-icon-plus"
          @click="dialogVisible_zyAdd = true"
          >添加</el-button
        >
      </div>
      <div style="margin-top: 15px">
        <el-table :data="tableData_SB" border style="width: 100%" height="350">
          <el-table-column prop="TypeNo" label="类型代码"> </el-table-column>
          <el-table-column prop="TypeName" label="检验类型"> </el-table-column>
          <el-table-column prop="ItemName" label="检验名称"> </el-table-column>
          <el-table-column prop="Fee" label="费用"> </el-table-column>
          <el-table-column prop="ItemNo" label="检验单号"> </el-table-column>
          <el-table-column prop="Status" label="状态"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="SB_DEL(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_zy = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_zy = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 预约管理添加弹层 -->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible_zyAdd"
      width="45%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :before-close="handleClose_zyAdd"
    >
      <div style="text-align: center">
        <el-button v-if="flag == 0" @click="add(1)" type="primary"
          >添加已有</el-button
        >
        <el-button v-if="flag == 0" @click="add(2)" type="success"
          >创建未有</el-button
        >
      </div>
      <!-- 已有表单 -->
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
        v-if="flag == 1"
      >
        <el-form-item
          label="检验类型"
          style="display: inline-block; width: 50%"
        >
          <el-select
            v-model="TJ_item"
            filterable
            placeholder="请选择"
            @change="TJ_item_change"
            style="width: 100%"
          >
            <el-option
              v-for="item in tableData_zy"
              :key="item.TypeNo"
              :label="item.TypeName"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="项目编码"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.ItemNo"></el-input>
        </el-form-item>
        <el-form-item
          label="检验名称"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.ItemName"></el-input>
        </el-form-item>
        <el-form-item
          label="预设费用"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.Fee"></el-input>
        </el-form-item>
        <el-form-item label="状态" style="display: inline-block; width: 50%">
          <el-input v-model="formLabelAlign.Status"></el-input>
        </el-form-item>
      </el-form>
      <!-- 未有表单 -->
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
        v-if="flag == 2"
      >
        <el-form-item
          label="类型代码"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.TypeNo"></el-input>
        </el-form-item>
        <el-form-item
          label="检验类型"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.TypeName"></el-input>
        </el-form-item>
        <el-form-item
          label="项目编码"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.ItemNo"></el-input>
        </el-form-item>
        <el-form-item
          label="检验名称"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.ItemName"></el-input>
        </el-form-item>
        <el-form-item
          label="预设费用"
          style="display: inline-block; width: 50%"
        >
          <el-input v-model="formLabelAlign.Fee"></el-input>
        </el-form-item>
        <el-form-item label="状态" style="display: inline-block; width: 50%">
          <el-input v-model="formLabelAlign.Status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose_zyAdd">取 消</el-button>
        <el-button type="primary" @click="SB_click">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      options_ks: [
        {
          value: "化验科",
          label: "化验科",
        },
      ],
      options_sb: [
        {
          value: "CT123",
          label: "CT123",
        },
      ],
      options_bw: [],
      options_jcfs: [
        {
          value: "平扫",
          label: "平扫",
        },
        {
          value: "增强",
          label: "增强",
        },
        {
          value: "平扫+增强",
          label: "平扫+增强",
        },
      ],
      value_ks: "化验科",
      tableData: [],
      tableData_zy: [],
      tableData_SB: [],
      dialogVisible_yuyue: false,
      dialogVisible_zy: false,
      dialogVisible_zyAdd: false,
      from: {},
      formLabelAlign: {},
      OrgansArr: 1034,
      options_a: [],
      pages: {
        currentpage: 1,
        pagesize: 10,
        total: 1,
      },
      tableData_item: [],
      JY_item: "1",
      flag: 0,
      TJ_item: {},
      GetNo: "",
      from_Item: {},
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token != null && this.$route.query.Token != "") {
      console.log(this.$route.query.Token, "KKKKKKKKKKKKKKKKKKKKKK");
      localStorage.setItem("token", this.$route.query.Token);
    } else {
    }
  },
  filters: {
    dateFormat(val) {
      // 时间过滤器
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times =
          d.getFullYear() +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          min +
          ":" +
          sec;
        return times;
      }
    },
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    this.gettree_list();
    this.getTableData();
    this.getSB_table();
    this.getzy_table();
  },
  // 组件方法
  methods: {
    handleClose_yuyue() {
      // 预约弹层关闭事件
      this.dialogVisible_yuyue = false;
      this.from = {};
      this.tableData_item = [];
    },
    handleClose_zy() {
      // 资源管理弹层关闭事件
      this.dialogVisible_zy = false;
    },
    handleClose_zyAdd() {
      // 资源管理新增/修改弹层关闭事件
      this.formLabelAlign = {};
      this.dialogVisible_zyAdd = false;
      this.flag = 0;
    },
    SB_click() {
      // 设备弹层确定按钮
      this.$post("/rv_LISItem/Create", this.formLabelAlign).then((res) => {
        if (res.code == 0) {
          this.getSB_table();
          this.dialogVisible_zyAdd = false;
          this.flag = 0;
          this.getzy_table();
          this.handleClose_zyAdd();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    SB_DEL(val) {
      // 设备删除按钮事件
      this.$get("/rv_LISItem/Delete/" + val.ID).then((res) => {
        if (res.code == 0) {
          this.getSB_table();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    getSB_table() {
      // 获取设备表格数据
      var body = {
        currentpage: 1,
        pagesize: 999,
        Condition: "TypeNo=" + this.JY_item,
      };
      this.$post("/rv_LISItem/GetListByCondition", body).then((res) => {
        if (res.code == 0) {
          this.tableData_SB = res.data;
        }
      });
    },
    getzy_table() {
      // 获取设备表格数据
      this.$get("/CommonInfo/qc_GetLisType").then((res) => {
        if (res.code == 0) {
          this.tableData_zy = res.data;
        }
      });
    },
    gettree_list() {
      // 获取组织数据
      this.$post(baseUrl.hrIp + "/auth/organs/searchlist", {}).then((res) => {
        if (res.code == 1) {
          this.options_a = res.data;
          this.from.HospitalID = res.data[0].value;
        }
      });
    },
    item_change(val) {
      // 检验分类切换事件
      var body = {
        currentpage: 1,
        pagesize: 40,
        Condition: "TypeNo=" + val,
      };
      this.$post("/rv_LISItem/GetListByCondition", body).then((res) => {
        if (res.code == 0) {
          this.options_bw = res.data;
        }
      });
    },
    handleChange(value) {
      // 组织点击事件
      this.OrgansArr = value;
      this.from.HospitalID = value;
    },
    dialogVisible_yuyue_butOk() {
      // 预约添加按钮
      var url = this.from.ID ? "/rv_LIS/Modify" : "/rv_LIS/Create";
      let body = this.from;
      var info = "";
      for (var i in this.tableData_item) {
        info = info + this.tableData_item[i].ID + "/";
      }
      body.CheckItem = info;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.dialogVisible_yuyue = false;
          this.tableData_item = [];
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    getTableData() {
      // 获取预约表格数据
      let body = {
        currentpage: this.pages.currentpage,
        pagesize: this.pages.pagesize,
        Condition: "1=1",
      };
      this.$post("/rv_LIS/GetListByCondition", body).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.pages.total = res.pageinfo.totalrecords;
        }
      });
    },
    YYpage_size(val) {
      // 预约页面页码切换事件
      this.pages.currentpage = val;
      this.getTableData();
    },
    yuyue_edit(val) {
      // 预约修改
      var info = JSON.stringify(val);
      this.from = JSON.parse(info);
      var strin = val.CheckItem.slice(0, val.CheckItem.length - 1);
      var body = {
        IDS: strin,
      };
      this.$post("/CommonInfo/qc_GetLisItemByIDS", body).then((res) => {
        if (res.code == 0) {
          this.tableData_item = res.data;
          this.dialogVisible_yuyue = true;
        }
      });
    },
    yuyue_DEl(val) {
      // 预约删除
      this.$get("/rv_LIS/Delete/" + val.ID).then((res) => {
        if (res.code == 0) {
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
    },
    item_change_2(val) {
      // 切换事件
      this.from_Item = val;
      this.from.j = this.from_Item.ItemName;
    },
    BW_ADD() {
      // 部位添加按钮
      this.tableData_item.push(this.from_Item);
      this.from.j = "";
    },
    getAge(val) {
      // 通过日期计算年龄
      var birthday = val;
      var birthday_time = birthday.split("-");
      var birthYear = birthday_time[0];
      var d = new Date();
      var nowYear = d.getFullYear();
      var age = nowYear - birthYear;
      this.from.Age = age;
    },
    JY_item_change(val) {
      // 检验类型切换事件
      this.JY_item = val + "";
      this.getSB_table();
    },
    add(val) {
      // 动态显示表单
      this.flag = val;
    },
    TJ_item_change(val) {
      // 动态表单切换事件
      this.formLabelAlign.TypeNo = val.TypeNo;
      this.formLabelAlign.TypeName = val.TypeName;
      this.TJ_item = val.TypeName;
    },
    open() {
      // 弹层开启事件
      this.getNo();
    },
    getNo() {
      // 获取预约单号
      this.$get("/CommonInfo/GetNo").then((res) => {
        if (res.code == 0) {
          this.GetNo = res.data;
          this.from.RvNo = this.GetNo;
          this.dialogVisible_yuyue = true;
        }
      });
    },
  },
};
</script>

<style>
</style>
